<template>
  <div class="activityLayer" v-if="layerShow">
    <template v-for="item in layerData">
      <div class="activityLayerCont"  :key="item.id" v-if="item.show">
        <template v-if="item.eventUrl">
          <img :src="item.imageUrl" alt="" @click="handleCloseLayer(item.id, item.eventUrl)" style="cursor: pointer;">
        </template>
        <template v-else>
          <img :src="item.imageUrl">
        </template>
        <i class="iconfont el-icon-close" @click="handleCloseLayer(item.id)"></i>
      </div>
    </template>
    <!-- 站外新开页面 -->
    <a :href="bannerUrl" class="hidden" target="_blank" ref="bannerUrlRef"></a>
    <!-- 站内不用新开页面 -->
    <a :href="bannerUrl" class="hidden" ref="bannerUrlRef1"></a>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs';
import { getReqUrl } from '@/utils/validate';

export default {
  name: 'activityLayer', // 首页活动弹窗
  data() {
    return {
      layerShow: false, // 弹窗显示
      layerData: [], // 弹窗数据
      bannerUrl: '',
    }
  },
  components: {},
  props: {},
  watch: {
    '$store.state.app.language': function change() {
      this.handleGetLayer();
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.handleGetLayer();
  },
  beforeDestroy() {},
  methods: {
    // 获取弹窗数据
    handleGetLayer() {
      // 弹窗缓存值
      const activityLayer = localStorage.getItem('activityLayer');
      const layerValue = activityLayer ? JSON.parse(activityLayer) : [];
      const linkUrl = getReqUrl();
      const language = this.$store.state.app.language;
      const scatter = this.$store.state.app.scatter;
      let chain = 'eos';
      let project = 'newdex';
      if (scatter && scatter.identity) {
        const wallet = scatter.wallet;
        if (wallet) {
          chain = scatter.chain || 'eos';
        }
      }
      if (this.$appName === 'tronNewdex') {
        chain = 'tron';
        project = 'trondex';
      }
      const params = {
        type: 3
      };
      axios({
        method: 'post',
        url: `${linkUrl}/api/commons/banner/list`,
        data: qs.stringify(params),
        headers: {
          chain,
          channel: 'web',
          language,
          project,
          'Content-Type': 'application/x-www-form-urlencoded'
        },
      }).then((res) => {
        const resData = res.data;
        resData.data.forEach((v) => {
          const vv = v;
          // 判断是否显示弹窗
          const showLayer = layerValue.some(j => j === vv.id);
          if (showLayer) {
            vv.show = false;
          } else {
            this.layerShow = true;
            vv.show = true;
          }
        });
        this.layerData = resData.data;
      })
    },
    // 关闭弹窗
    handleCloseLayer(id, url) {
      // 弹窗缓存值
      const activityLayer = localStorage.getItem('activityLayer');
      const layerValue = activityLayer ? JSON.parse(activityLayer) : [];
      layerValue.push(id);
      localStorage.setItem('activityLayer', JSON.stringify(layerValue));
      setTimeout(() => {
        this.layerShow = false;
        this.handleGetLayer();
      }, 300);
      if (url) {
        const host = window.location.host;
        let href = url;
        // 站内跳转
        if (url.indexOf('newdex.io') >= 0 || url.indexOf('newdex.vip') >= 0) {
          if (url.indexOf('newdex.io') >= 0) {
            href = url.replace('newdex.io', host);
          }
          if (url.indexOf('newdex.vip') >= 0) {
            href = url.replace('newdex.vip', host);
          }
          this.bannerUrl = href;
          this.$nextTick(() => {
            this.$refs.bannerUrlRef1.click();
          });
        } else { // 站外跳转
          this.bannerUrl = href;
          this.$nextTick(() => {
            this.$refs.bannerUrlRef.click();
          });
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.activityLayer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;

  .activityLayerCont {
    position: absolute;
    width: 600px;
    min-height: 380px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    border-radius: 8px;

    img {
      display: inline-block;
      vertical-align: middle;
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
  }

  i {
      position: absolute;
      right: -30px;
      top: -2px;
      font-size: 30px;
      color: #fff;
      cursor: pointer;
    }
}
</style>

